<template>
<div >
<h1  align="left">宠物主管理:</h1>
<el-form style="margin-top: 15px; " :inline="true">
    <el-form-item style="width: 30%; margin-left:-71.5%">
  <el-input placeholder="请输入内容" v-model="input1" class="input-with-select" :inline="true">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="昵称" value="1"></el-option>
      <el-option label="真实姓名" value="2"></el-option>
      <el-option label="选择电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search" @click="refresh">搜索</el-button>
  </el-input>
    </el-form-item>
  <el-form-item>
  <el-button style="margin-left:420%">添加宠物主人</el-button>
  </el-form-item>
</el-form>
<div>

  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="t_nickname"
      label="昵称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="t_avatar"
      label="头像"
      width="120">
    </el-table-column>
    <el-table-column
      prop="t_monicker"
      label="真实名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="t_tel"
      label="手机号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="t_area"
      label="区域"
      width="120">
    </el-table-column>
    <el-table-column
      prop="t_address"
      label="送货地址"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看宠物</el-button>
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
    <el-popover
           placement="top"
            width="160"
            v-model="visible">
            <p>你确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
                </div>
            <el-button slot="reference">删除</el-button>
    </el-popover>

      </template>
    </el-table-column>
  </el-table>

  <el-pagination
 background
 layout="prev, pager, next"
:page-size="20"
:total="1000"   
 style="margin-left:-50%"
>
</el-pagination>

</div>

  </div>
</template>


<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },
    data() {
    return {
      visible: false,
      input1: '',
      select: ''
      }
    },
  }
</script>


<style>
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
   }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
